---
title: 例
description: Ultraciteの動作の前後の例。
---

Ultraciteの機能を示すために、検出して修正する実用的な例をいくつか示します。各例は、問題のある適用前のコードとUltraciteを適用した後のコードを表示します。これらの例は、Ultraciteがコードを自動的にどのように改善するかを示しています。

## 自動コード整形

### 適用前（書式が乱れている）

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

このコードはスペースと連結のスタイルが不適切です。テンプレートリテラルの代わりに文字列の連結を使用しており、シングルクォートとダブルクォートが混在しています。

### 適用後（整形済み）

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Ultraciteのフォーマッターは以下を行いました：

- 可読性のために関数を適切な改行で整形した。
- 文字列の連結をテンプレートリテラルに変換した（これは可読性向上のためにテンプレート文字列を推奨するリンタールールによる自動修正である可能性がある）。
- テンプレートではバックティックに統一し（テンプレートでない箇所では一貫してダブルクォートを使用する）。
- `return`文の末尾にセミコロンを追加した。
- 波括弧や丸括弧の周りのスペースを適切にした。

開発者は手動でコードを整形したわけではなく、ファイルを保存しただけでUltraciteが残りを処理しました。結果として、よりクリーンで一貫性のあるコードになっています。

Ultraciteは`name`が型指定されていないことを警告し、型を追加することを提案します。

## 厳密等価性の強制

### 適用前（緩い等価による潜在的なバグ）

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

ここでは、`response.status`を`200`と比較するのに緩い等価演算子（`==`）を使っています。緩い等価は型変換のためにエラーを生みやすい（例：`response.status`が文字列の`"200"`でも通ってしまう）。Ultraciteの厳密なルールは比較に`===`を使うことを強制する可能性が高いです。

### 適用後（Ultraciteの自動修正が適用された）

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultraciteは自動的に`== 200`を`=== 200`に置き換えました。この小さな変更は微妙なバグを防ぎます。修正は保存時に`source.fixAll.biome`のアクションの一部として適用されました。この種のルール（ESLintの`eqeqeq`に類似）は、開発者に厳密な等価比較を使用させることを保証します。

さらに、Ultraciteは`isValid`が未使用であると警告し、削除を提案します。

## インポートの整理とクリーンアップ

### 適用前（インポートが整理されていない）

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

ここではインポートの順序がアルファベット順になっておらず、helperのインポートはファイル内で一度も使用されていません。

### 適用後（Ultraciteで保存後）

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite（Biomeのインポート整理機能を介して）はモジュール名でインポートをアルファベット順に並べ替えました。また、未使用のhelperのインポートを自動的に削除しました。これらの前後の差分は保存時に即座に発生し、インポート部分が常に整然としていることを保証します：

- ファイルの先頭に未使用のインポートが散らからない。
- インポートの決定的な順序（異なる開発者が追加した異なるインポート順でマージや差分が混乱しないように）。

これにより、特にインポートが多いファイルでコードの保守性が向上します。

## アクセシビリティ修正

### 適用前

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

ボタンのデフォルトのtypeは`submit`であり、フォーム要素内に配置されるとフォームの送信を引き起こします。これはReactアプリケーション内では望ましくない挙動である可能性が高いです。Ultraciteはこれを警告し、typeを`button`に変更するクイックフィックスを提案します。

### 適用後（手動またはクイックフィックス）

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

typeが`button`になり、ボタンがクリックされたときに親フォームが送信される可能性を防ぎます。

---

これらの例は、Ultraciteがコード品質をどのように改善するかを示しています：

- 手間をかけずにフォーマットとスタイルの一貫性を確保する。
- 多くの一般的な問題に対する自動修正（そのため些細なことを手動で修正する必要がほとんどない）。
- 実際の問題の特定（開発の早い段階で修正できる）。

Ultraciteを使用することで、コードはクリーンであるだけでなく、ルールに組み込まれた集合知のおかげでバグが少なく、よりアクセシブルになります。